<template>
  <div class="app-container">
    <el-card class="main-card" shadow="never">
      <!-- 状态筛选tabs -->
      <div class="status-section" v-show="showSearch">
        <div class="status-card-container">
          <div class="status-slider" :style="sliderStyle"></div>
          <div 
            class="status-card-item" 
            :class="{ active: currentStatus === '' }"
            @click="handleStatusClick('')"
          >
            <i class="el-icon-menu"></i>
            <span>全部</span>
          </div>
          <div 
            class="status-card-item" 
            :class="{ active: currentStatus === '2' }"
            @click="handleStatusClick('2')"
          >
            <i class="el-icon-check"></i>
            <span>通过</span>
          </div>
          <div 
            class="status-card-item" 
            :class="{ active: currentStatus === '3' }"
            @click="handleStatusClick('3')"
          >
            <i class="el-icon-close"></i>
            <span>拒绝</span>
          </div>
          <div 
            class="status-card-item" 
            :class="{ active: currentStatus === '4' }"
            @click="handleStatusClick('4')"
          >
            <i class="el-icon-remove"></i>
            <span>已取消</span>
          </div>
        </div>
      </div>

      <!-- 筛选条件 -->
      <div class="search-section" v-show="showSearch">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" class="search-form">
          <!-- 第一行：主要筛选条件 -->
          <div class="search-row">
            <el-form-item label="会议名称" prop="meetingtitle">
              <el-input
                v-model="queryParams.meetingtitle"
                placeholder="请输入会议名称"
                clearable
                @keyup.enter.native="handleQuery"
                style="width: 200px;"
              />
            </el-form-item>
            <el-form-item label="会议室" prop="pid">
              <el-select v-model="queryParams.pid" placeholder="请选择会议室" clearable filterable style="width: 150px;">
                <el-option
                  v-for="room in roomList"
                  :key="room.id"
                  :label="room.name"
                  :value="room.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="召集人" prop="convener">
              <el-select v-model="queryParams.convener" placeholder="请选择召集人" clearable filterable style="width: 150px;">
                <el-option
                  v-for="user in userList"
                  :key="user.userId"
                  :label="user.nickName"
                  :value="user.userId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              <el-button 
                type="text" 
                size="mini" 
                @click="toggleMoreFilters"
                class="more-btn"
              >
                {{ showMoreFilters ? '收起' : '更多' }}
                <i :class="showMoreFilters ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
              </el-button>
            </el-form-item>
          </div>

          <!-- 更多筛选条件 -->
          <div class="more-filters" v-show="showMoreFilters">
            <el-form-item label="预约人" prop="reservedby">
              <el-select v-model="queryParams.reservedby" placeholder="请选择预约人" clearable filterable style="width: 150px;">
                <el-option
                  v-for="user in userList"
                  :key="user.userId"
                  :label="user.nickName"
                  :value="user.userId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="科室" prop="department">
              <el-select v-model="queryParams.department" placeholder="请选择科室" clearable filterable style="width: 150px;">
                <el-option
                  v-for="dept in deptList"
                  :key="dept.deptId"
                  :label="dept.deptName"
                  :value="dept.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="会议日期" prop="dateRange">
              <el-date-picker clearable
                v-model="queryParams.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                style="width: 240px;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="开始时间" prop="startTime">
              <el-time-picker
                v-model="queryParams.startTime"
                placeholder="请选择开始时间"
                value-format="HH:mm"
                format="HH:mm"
                clearable
                style="width: 120px;">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
              <el-time-picker
                v-model="queryParams.endTime"
                placeholder="请选择结束时间"
                value-format="HH:mm"
                format="HH:mm"
                clearable
                style="width: 120px;">
              </el-time-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 工具栏 -->
      <div class="toolbar-section">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:yuyue:add']"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:yuyue:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </div>

      <!-- 表格 -->
      <div class="table-section">
        <el-table v-loading="loading" :data="yuyueList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="会议名称" align="center" prop="meetingtitle" min-width="220" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.meetingtitle" :title="scope.row.meetingtitle">{{ scope.row.meetingtitle }}</span>
          <span v-else style="color: #909399;">未设置</span>
        </template>
      </el-table-column>
      <el-table-column label="会议室" align="center" prop="pid" width="120">
        <template slot-scope="scope">
          {{ getRoomNameById(scope.row.pid) }}
        </template>
      </el-table-column>
      <el-table-column label="召集人" align="center" prop="convener" width="120">
        <template slot-scope="scope">
          {{ getUserNameById(scope.row.convener) }}
        </template>
      </el-table-column>
      <el-table-column label="预约人" align="center" prop="reservedby" width="120">
        <template slot-scope="scope">
          {{ getUserNameById(scope.row.reservedby) }}
        </template>
      </el-table-column>
      <el-table-column label="科室" align="center" prop="department" width="120">
        <template slot-scope="scope">
          {{ getDeptNameById(scope.row.department) }}
        </template>
      </el-table-column>
      <el-table-column label="参会人员范围" align="center" prop="content" min-width="180" />
      <el-table-column label="会议日期" align="center" prop="thedate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.thedate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center" prop="startTime" />
      <el-table-column label="结束时间" align="center" prop="endTime" />
      <el-table-column label="会议保障" align="center" prop="ensure" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.ensure == '1' ? 'success' : 'warning'"
            size="small">
            {{ scope.row.ensure == '1' ? '需要' : '不需要' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否到分局" align="center" prop="need_branch_office" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.need_branch_office == 1 ? 'success' : 'info'"
            size="small">
            {{ scope.row.need_branch_office == 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="选择的分局" align="center" prop="selected_branches" min-width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.need_branch_office == 1 && scope.row.selected_branches">
            {{ scope.row.selected_branches }}
          </span>
          <span v-else style="color: #909399;">--</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" min-width="140" />
      <el-table-column label="状态" align="center" prop="state" width="100" fixed="right">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.state == '1' ? 'warning' : scope.row.state == '2' ? 'success' : scope.row.state == '3' ? 'danger' : 'info'"
            size="small">
            {{ scope.row.state == '1' ? '审批中' : scope.row.state == '2' ? '通过' : scope.row.state == '3' ? '拒绝' : '已取消' }}
          </el-tag>
          <div v-if="scope.row.state == '3'" style="color: red;font-size: 12px;">{{ scope.row.yuanyin }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state == '1'"
            size="mini"
            type="text"
            icon="el-icon-check"
            @click="handleAudit(scope.row)"
            v-hasPermi="['system:yuyue:audit']"
            style="color: #67C23A;"
          >审核</el-button>
          <el-button
            v-if="scope.row.state == '2' && !isMeetingCompleted(scope.row)"
            size="mini"
            type="text"
            icon="el-icon-close"
            @click="handleReject(scope.row)"
            v-hasPermi="['system:yuyue:audit']"
            style="color: #F56C6C;"
          >拒绝</el-button>
          <el-button
            v-if="scope.row.state == '1'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:yuyue:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:yuyue:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-section" v-show="total>0">
        <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>

    <!-- 添加或修改会议预约对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" top="5vh" append-to-body>
      <div style="max-height: 70vh;">
        <!-- 已审核提示 -->
        <el-alert
          v-if="form.id && form.state && form.state != '1'"
          title="此会议预约已审核，无法修改"
          type="warning"
          :closable="false"
          show-icon
          style="margin-bottom: 20px;">
        </el-alert>
        <el-form ref="form" :model="form" :rules="rules" label-width="140px" size="small">
          <!-- 基本信息 -->
          <el-form-item label="会议名称" prop="meetingtitle" style="margin-bottom: 20px;">
            <el-input 
              v-model="form.meetingtitle" 
              placeholder="请输入会议名称"
              :disabled="form.id && form.state && form.state != '1'"
            />
          </el-form-item>
          <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="12">
              <el-form-item label="会议室" prop="pid">
                <el-select 
                  v-model="form.pid" 
                  placeholder="请选择会议室" 
                  filterable 
                  style="width: 100%;"
                  :disabled="form.id && form.state && form.state != '1'"
                >
                  <el-option
                    v-for="room in roomList"
                    :key="room.id"
                    :label="room.name"
                    :value="room.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="召集人" prop="convener">
                <el-select 
                  v-model="form.convener" 
                  placeholder="请选择召集人" 
                  filterable 
                  style="width: 100%;"
                  :disabled="form.id && form.state && form.state != '1'"
                >
                  <el-option
                    v-for="user in userList"
                    :key="user.userId"
                    :label="user.nickName"
                    :value="user.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="12">
              <el-form-item label="预约人" prop="reservedby">
                <el-select 
                  v-model="form.reservedby" 
                  placeholder="请选择预约人" 
                  filterable 
                  style="width: 100%;"
                  :disabled="form.id && form.state && form.state != '1'"
                >
                  <el-option
                    v-for="user in userList"
                    :key="user.userId"
                    :label="user.nickName"
                    :value="user.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科室" prop="department">
                <el-select 
                  v-model="form.department" 
                  placeholder="请选择科室" 
                  filterable 
                  style="width: 100%;"
                  :disabled="form.id && form.state && form.state != '1'"
                >
                  <el-option
                    v-for="dept in deptList"
                    :key="dept.deptId"
                    :label="dept.deptName"
                    :value="dept.deptId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="会议日期" prop="thedate" style="margin-bottom: 20px;">
            <el-date-picker 
              clearable
              v-model="form.thedate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择会议日期"
              style="width: 100%;"
              :disabled="form.id && form.state && form.state != '1'"
            >
            </el-date-picker>
          </el-form-item>

          <!-- 时间信息 -->
          <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="12">
              <el-form-item label="开始时间" prop="startTime">
                <el-time-picker
                  v-model="form.startTime"
                  placeholder="请选择开始时间"
                  value-format="HH:mm"
                  format="HH:mm"
                  @change="handleStartTimeChange"
                  style="width: 100%;"
                  :disabled="form.id && form.state && form.state != '1'"
                >
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endTime">
                <el-time-picker
                  v-model="form.endTime"
                  placeholder="请选择结束时间"
                  value-format="HH:mm"
                  format="HH:mm"
                  @change="handleEndTimeChange"
                  style="width: 100%;"
                  :disabled="form.id && form.state && form.state != '1'"
                >
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 人员和保障信息 -->
          <el-form-item label="参会人员范围" style="margin-bottom: 20px;">
            <el-input 
              v-model="form.content" 
              type="textarea" 
              :rows="3" 
              placeholder="请输入参会人员范围"
              :disabled="form.id && form.state && form.state != '1'"
            />
          </el-form-item>
          <el-form-item label="是否需要会议保障" style="margin-bottom: 20px;">
            <el-select 
              v-model="form.ensure" 
              placeholder="请选择是否需要会议保障" 
              style="width: 100%;"
              :disabled="form.id && form.state && form.state != '1'"
            >
              <el-option label="需要" :value="1"></el-option>
              <el-option label="不需要" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否到分局" style="margin-bottom: 20px;">
            <el-select 
              v-model="form.need_branch_office" 
              placeholder="请选择是否到分局" 
              style="width: 100%;"
              :disabled="form.id && form.state && form.state != '1'"
              @change="handleneed_branch_officeChange"
            >
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item 
            label="选择的分局" 
            prop="selected_branches"
            style="margin-bottom: 20px;"
            v-if="form.need_branch_office == 1"
          >
            <el-select 
              v-model="form.selected_branches" 
              placeholder="请选择分局（可多选）" 
              multiple
              style="width: 100%;"
              :disabled="form.id && form.state && form.state != '1'"
            >
              <el-option label="市中区" value="市中区"></el-option>
              <el-option label="薛城区" value="薛城区"></el-option>
              <el-option label="峄城区" value="峄城区"></el-option>
              <el-option label="台儿庄区" value="台儿庄区"></el-option>
              <el-option label="山亭区" value="山亭区"></el-option>
              <el-option label="滕州市" value="滕州市"></el-option>
              <el-option label="高新区" value="高新区"></el-option>
            </el-select>
          </el-form-item>

          <!-- 备注信息 -->
          <el-form-item label="备注">
            <el-input 
              v-model="form.remark" 
              type="textarea" 
              :rows="2" 
              placeholder="请输入备注内容"
              :disabled="form.id && form.state && form.state != '1'"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button 
          type="primary" 
          size="medium" 
          @click="submitForm" 
          style="min-width: 120px; margin-right: 15px;"
          :disabled="form.id && form.state && form.state != '1'"
        >
          确 定
        </el-button>
        <el-button size="medium" @click="cancel" style="min-width: 120px;">
          取 消
        </el-button>
      </div>
    </el-dialog>

  <!-- 审核会议预约对话框 -->
  <el-dialog :title="auditTitle" :visible.sync="auditOpen" width="1000px" append-to-body>
    <div style="max-height: 70vh; overflow-y: auto;">
      <!-- 会议信息展示区域 -->
      <div class="audit-info-section">
        <div class="section-header">
          <i class="el-icon-document"></i>
          <span>会议信息</span>
        </div>
        
        <div class="info-card">
          <div class="info-grid">
            <!-- 会议名称 -->
            <div class="info-row full-width">
              <div class="info-cell">
                <div class="info-label">会议名称</div>
                <div class="info-value title-value">{{ auditForm.meetingtitle || '未设置' }}</div>
              </div>
            </div>
            
            <!-- 基本信息行 -->
            <div class="info-row">
              <div class="info-cell">
                <div class="info-label">会议室</div>
                <div class="info-value">{{ getRoomNameById(auditForm.pid) }}</div>
              </div>
              <div class="info-cell">
                <div class="info-label">召集人</div>
                <div class="info-value">{{ getUserNameById(auditForm.convener) || '未设置' }}</div>
              </div>
              <div class="info-cell">
                <div class="info-label">预约人</div>
                <div class="info-value">{{ getUserNameById(auditForm.reservedby) }}</div>
              </div>
            </div>
            
            <!-- 科室信息行 -->
            <div class="info-row">
              <div class="info-cell">
                <div class="info-label">科室</div>
                <div class="info-value">{{ getDeptNameById(auditForm.department) }}</div>
              </div>
              <div class="info-cell">
                <!-- 占位，保持布局平衡 -->
              </div>
              <div class="info-cell">
                <!-- 占位，保持布局平衡 -->
              </div>
            </div>
            
            <!-- 时间信息行 -->
            <div class="info-row">
              <div class="info-cell">
                <div class="info-label">会议日期</div>
                <div class="info-value">{{ auditForm.thedate || '未设置' }}</div>
              </div>
              <div class="info-cell">
                <div class="info-label">开始时间</div>
                <div class="info-value">{{ auditForm.startTime || '未设置' }}</div>
              </div>
              <div class="info-cell">
                <div class="info-label">结束时间</div>
                <div class="info-value">{{ auditForm.endTime || '未设置' }}</div>
              </div>
            </div>
            
            <!-- 状态和保障信息行 -->
            <div class="info-row">
              <div class="info-cell">
                <div class="info-label">会议保障</div>
                <div class="info-value">
                  <el-tag :type="auditForm.ensure == '1' ? 'success' : 'warning'" size="small">
                    {{ auditForm.ensure == '1' ? '需要' : '不需要' }}
                  </el-tag>
                </div>
              </div>
              <div class="info-cell">
                <div class="info-label">是否到分局</div>
                <div class="info-value">
                  <el-tag :type="auditForm.need_branch_office == 1 ? 'success' : 'info'" size="small">
                    {{ auditForm.need_branch_office == 1 ? '是' : '否' }}
                  </el-tag>
                </div>
              </div>
              <div class="info-cell">
                <div class="info-label">当前状态</div>
                <div class="info-value">
                  <el-tag
                    :type="auditForm.state == '1' ? 'warning' : auditForm.state == '2' ? 'success' : 'danger'"
                    size="small">
                    {{ auditForm.state == '1' ? '审批中' : auditForm.state == '2' ? '通过' : '拒绝' }}
                  </el-tag>
                </div>
              </div>
            </div>
            
            <!-- 分局信息行 -->
            <div class="info-row full-width" v-if="auditForm.need_branch_office == 1 && auditForm.selected_branches">
              <div class="info-cell">
                <div class="info-label">选择的分局</div>
                <div class="info-value detail-content">{{ auditForm.selected_branches }}</div>
              </div>
            </div>
            
            <!-- 详细信息 -->
            <div class="info-row full-width" v-if="auditForm.content">
              <div class="info-cell">
                <div class="info-label">参会人员范围</div>
                <div class="info-value detail-content">{{ auditForm.content }}</div>
              </div>
            </div>
            
            <div class="info-row full-width" v-if="auditForm.remark">
              <div class="info-cell">
                <div class="info-label">备注</div>
                <div class="info-value detail-content">{{ auditForm.remark }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核操作区域 -->
      <div class="audit-action-section" style="margin-top: 30px;">
        <h4 :style="{ margin: '0 0 20px 0', color: '#303133', fontSize: '16px', borderBottom: isRejectMode ? '2px solid #F56C6C' : '2px solid #67C23A', paddingBottom: '8px' }">
          <i :class="isRejectMode ? 'el-icon-close' : 'el-icon-check'" style="margin-right: 8px;"></i>{{ isRejectMode ? '拒绝操作' : '审核操作' }}
        </h4>
        <el-form ref="auditForm" :model="auditForm" :rules="auditRules" label-width="100px">
          <el-form-item :label="isRejectMode ? '拒绝结果' : '审核结果'" prop="auditResult">
            <el-radio-group v-model="auditForm.auditResult" @change="handleAuditResultChange" style="width: 100%;">
              <el-radio v-if="!isRejectMode" label="2" style="margin-right: 30px;">
                <span style="color: #67C23A; font-weight: bold; pointer-events: none;">✓ 通过</span>
              </el-radio>
              <el-radio label="3">
                <span style="color: #F56C6C; font-weight: bold; pointer-events: none;">✗ 拒绝</span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="isRejectMode ? '拒绝原因' : '审核意见'" prop="yuanyin">
            <el-input 
              v-model="auditForm.yuanyin" 
              type="textarea" 
              :rows="4" 
              :placeholder="isRejectMode ? '请输入拒绝原因（必填）' : '请输入审核意见（拒绝时请详细说明原因）'"
              maxlength="200"
              show-word-limit />
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer" style="text-align: center; padding: 20px 0;">
      <el-button type="primary" size="medium" @click="submitAudit" :style="{ minWidth: '120px', marginRight: '15px', backgroundColor: isRejectMode ? '#F56C6C' : '', borderColor: isRejectMode ? '#F56C6C' : '' }">
        <i :class="isRejectMode ? 'el-icon-close' : 'el-icon-check'" style="margin-right: 5px;"></i>{{ isRejectMode ? '确认拒绝' : '确认审核' }}
      </el-button>
      <el-button size="medium" @click="cancelAudit" style="min-width: 120px;">
        <i class="el-icon-close" style="margin-right: 5px;"></i>取消
      </el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { listYuyue, getYuyue, delYuyue, addYuyue, updateYuyue } from "@/api/system/yuyue"
import { listRoom } from "@/api/system/room"
import { listDept } from "@/api/system/dept"
import { listUser } from "@/api/system/user"

export default {
  name: "Yuyue",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 显示更多筛选条件
      showMoreFilters: false,
      // 总条数
      total: 0,
      // zz表格数据
      yuyueList: [],
      // 会议室列表
      roomList: [],
      // 科室列表
      deptList: [],
      // 用户列表
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示审核弹出层
      auditOpen: false,
      // 审核数据
      auditForm: {
        auditResult: '',
      },
      // 审核标题
      auditTitle: "",
      // 是否是拒绝模式（用于已通过的会议再次拒绝）
      isRejectMode: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pid: null,
        content: null,
        convener: null,
        reservedby: null,
        thedate: null,
        dateRange: null,
        startTime: null,
        endTime: null,
        state: null,
        department: null,
        meetingtitle: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        meetingtitle: [
          { required: true, message: "请输入会议名称", trigger: "blur" }
        ],
        pid: [
          { required: true, message: "请选择会议室", trigger: "change" }
        ],
        convener: [
          { required: true, message: "请选择召集人", trigger: "change" }
        ],
        reservedby: [
          { required: true, message: "请选择预约人", trigger: "change" }
        ],
        department: [
          { required: true, message: "请选择科室", trigger: "change" }
        ],
        thedate: [
          { required: true, message: "请选择会议日期", trigger: "change" }
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
          { validator: this.validateStartTime, trigger: "change" }
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
          { validator: this.validateEndTime, trigger: "change" }
        ],
        selected_branches: [
          { validator: this.validateselected_branches, trigger: "change" }
        ]
      },
      // 审核表单校验
      auditRules: {
        auditResult: [
          { required: true, message: "请选择审核结果", trigger: "change" }
        ],
        yuanyin: [
          { validator: this.validateyuanyin, trigger: "blur" }
        ]
      }
    }
  },
  computed: {
    // 当前选中的状态
    currentStatus() {
      return this.queryParams.state || ''
    },
    // 滑动指示器的样式
    sliderStyle() {
      const statuses = ['', '2', '3', '4']
      const statusIndex = statuses.indexOf(this.currentStatus)
      // 如果状态不在列表中（如'1'待审批），默认显示在"全部"位置
      const index = statusIndex >= 0 ? statusIndex : 0
      // 容器有4px的padding，所以每个item的实际宽度是 calc((100% - 8px) / N)
      const width = `calc((100% - 8px) / ${statuses.length})`
      // left位置需要考虑容器的padding和item的索引
      const left = `calc(4px + ${index} * (100% - 8px) / ${statuses.length})`
      return {
        width: width,
        left: left
      }
    }
  },
  created() {
    // 从路由参数中读取 state，如果存在则设置到 queryParams
    if (this.$route.query.state) {
      this.queryParams.state = this.$route.query.state
    }
    this.getList()
    this.getRoomList()
    this.getDeptList()
    this.getUserList()
  },
  methods: {
    /** 查询zz列表 */
    getList() {
      this.loading = true
      // 处理日期范围查询
      const params = { ...this.queryParams, orderByColumn: 'id', isAsc: 'desc' }
      if (params.dateRange && params.dateRange.length === 2) {
        params.startdate = params.dateRange[0]
        params.enddate = params.dateRange[1]
      }
      // 删除dateRange字段，避免传递给后端
      delete params.dateRange
      // 如果state为空、null或0，删除该字段，不传给后端
      if (!params.state || params.state === '0' || params.state === 0) {
        delete params.state
      }
      
      listYuyue(params).then(response => {
        this.yuyueList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 查询会议室列表 */
    getRoomList() {
      listRoom({}).then(response => {
        this.roomList = response.rows
      })
    },
    /** 根据会议室ID获取会议室名称 */
    getRoomNameById(roomId) {
      const room = this.roomList.find(r => r.id === roomId)
      return room ? room.name : '未知会议室'
    },
    /** 根据科室ID获取科室名称 */
    getDeptNameById(departmentId) {
      if (!departmentId) return '--'
      const dept = this.deptList.find(d => d.deptId === departmentId)
      return dept ? dept.deptName : '未知科室'
    },
    /** 根据用户ID获取用户名称 */
    getUserNameById(userId) {
      if (!userId) return '--'
      const user = this.userList.find(u => u.userId === userId)
      return user ? user.nickName : '未知用户'
    },
    /** 查询科室列表 */
    getDeptList() {
      listDept({}).then(response => {
        const allDepts = response.data || response.rows || []

        // 如果为树结构，递归扁平化并剔除一级科室（parentId 为 0 或 null）
        const result = []
        const visit = (nodes) => {
          if (!Array.isArray(nodes)) return
          nodes.forEach(node => {
            const isLevel1 = node.parentId === 0 || node.parentId === '0' || node.parentId == null
            if (!isLevel1) {
              result.push({ deptId: node.deptId, deptName: node.deptName, parentId: node.parentId })
            }
            if (node.children && Array.isArray(node.children) && node.children.length > 0) {
              visit(node.children)
            }
          })
        }

        if (allDepts.some(d => Array.isArray(d.children) && d.children.length > 0)) {
          visit(allDepts)
          // 简单按父子层级与id排序，便于下拉展示
          this.deptList = result.sort((a, b) => (a.parentId || 0) - (b.parentId || 0) || a.deptId - b.deptId)
        } else {
          // 非树：直接过滤掉一级科室
          this.deptList = allDepts
            .filter(d => !(d.parentId === 0 || d.parentId === '0' || d.parentId == null))
            .sort((a, b) => (a.parentId || 0) - (b.parentId || 0) || a.deptId - b.deptId)
        }
      })
    },
    /** 查询用户列表 */
    getUserList() {
      listUser({
        pageNum: 1,
        pageSize: 999
      }).then(response => {
        this.userList = response.rows || []
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        meetingtitle: null,
        pid: null,
        content: null,
        convener: null,
        reservedby: null,
        thedate: null,
        startTime: null,
        endTime: null,
        ensure: null,
        need_branch_office: 0,
        selected_branches: [],
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      // 重置日期范围
      this.queryParams.dateRange = null
      // 重置状态筛选，还原到"全部"
      this.queryParams.state = null
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "新增会议预约"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // 检查是否已经审核过（state !== '1'表示已审核）
      if (row.state && row.state !== '1') {
        this.$modal.msgWarning('已审核的会议预约不能修改')
        return
      }
      
      this.reset()
      const id = row.id || this.ids
      getYuyue(id).then(response => {
        // 再次检查状态，防止数据不一致
        if (response.data.state && response.data.state !== '1') {
          this.$modal.msgWarning('已审核的会议预约不能修改')
          return
        }
        this.form = response.data
        // 处理分局数据：将字符串转为数组
        if (this.form.selected_branches && typeof this.form.selected_branches === 'string') {
          this.form.selected_branches = this.form.selected_branches.split(',').filter(b => b.trim())
        } else if (!this.form.selected_branches) {
          this.form.selected_branches = []
        }
        // 确保 need_branch_office 有默认值
        if (this.form.need_branch_office === undefined || this.form.need_branch_office === null) {
          this.form.need_branch_office = 0
        }
        this.open = true
        this.title = "修改会议预约"
      })
    },
    /** 审核按钮操作 */
    handleAudit(row) {
      this.isRejectMode = false
      this.auditForm = { ...row }
      this.auditForm.auditResult = '2' // 默认选择通过
      this.auditForm.yuanyin = ''
      this.auditOpen = true
      this.auditTitle = "审核会议预约"
    },
    /** 判断会议是否已完成（结束时间在当前时间之前） */
    isMeetingCompleted(meeting) {
      if (!meeting || !meeting.thedate || !meeting.endTime) {
        return false
      }
      const now = new Date()
      const meetingDate = new Date(meeting.thedate)
      const endTime = meeting.endTime
      
      // 解析结束时间（格式：HH:mm）
      const [endHour, endMin] = endTime.split(':').map(Number)
      const endDateTime = new Date(meetingDate)
      endDateTime.setHours(endHour, endMin, 0, 0)
      
      // 如果结束时间已过，则认为已完成
      return now > endDateTime
    },
    /** 拒绝按钮操作（用于已通过的会议） */
    handleReject(row) {
      // 检查会议是否已完成
      if (this.isMeetingCompleted(row)) {
        this.$modal.msgWarning('已完成的会议不能再拒绝')
        return
      }
      this.isRejectMode = true
      this.auditForm = { ...row }
      this.auditForm.auditResult = '3' // 默认选择拒绝
      this.auditForm.yuanyin = ''
      this.auditOpen = true
      this.auditTitle = "拒绝会议预约"
    },
    /** 提交审核 */
    submitAudit() {
      // 如果没有选择审核结果，默认设置为2（通过）
      if (!this.auditForm.auditResult) {
        this.auditForm.auditResult = '2'
      }
      
      this.$refs["auditForm"].validate(valid => {
        if (valid) {
          const auditData = {
            ...this.auditForm,
            state: this.auditForm.auditResult || '2'
          }
          updateYuyue(auditData).then(response => {
            this.$modal.msgSuccess(this.isRejectMode ? "拒绝成功" : "审核成功")
            this.auditOpen = false
            this.isRejectMode = false
            this.getList()
          })
        }
      })
    },
    /** 取消审核 */
    cancelAudit() {
      this.auditOpen = false
      this.resetAudit()
    },
    /** 重置审核表单 */
    resetAudit() {
      this.auditForm = {}
      this.isRejectMode = false
      this.resetForm("auditForm")
    },
    /** 提交按钮 */
    submitForm() {
      // 修改时，检查是否已经审核过
      if (this.form.id != null && this.form.state && this.form.state !== '1') {
        this.$modal.msgWarning('已审核的会议预约不能修改')
        return
      }
      
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 处理分局数据：将数组转为字符串
          const formData = { ...this.form }
          if (Array.isArray(formData.selected_branches)) {
            formData.selected_branches = formData.selected_branches.join(',')
          } else if (!formData.selected_branches) {
            formData.selected_branches = ''
          }
          
          if (formData.id != null) {
            // 再次检查状态，防止数据不一致
            if (formData.state && formData.state !== '1') {
              this.$modal.msgWarning('已审核的会议预约不能修改')
              return
            }
            updateYuyue(formData).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            formData.state = '2' // 默认状态为2（通过）
            addYuyue(formData).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除这条数据？').then(function() {
        return delYuyue(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理日期范围导出
      const params = { ...this.queryParams }
      if (params.dateRange && params.dateRange.length === 2) {
        params.startdate = params.dateRange[0]
        params.enddate = params.dateRange[1]
      }
      // 删除dateRange字段，避免传递给后端
      delete params.dateRange
      // 如果state为空、null或0，删除该字段，不传给后端
      if (!params.state || params.state === '0' || params.state === 0) {
        delete params.state
      }
      
      this.download('system/yuyue/export', params, `yuyue_${new Date().getTime()}.xlsx`)
    },
    /** 验证开始时间 */
    validateStartTime(rule, value, callback) {
      if (!value) {
        callback()
        return
      }
      if (this.form.endTime && value >= this.form.endTime) {
        callback(new Error('开始时间必须早于结束时间'))
      } else {
        callback()
      }
    },
    /** 验证结束时间 */
    validateEndTime(rule, value, callback) {
      if (!value) {
        callback()
        return
      }
      if (this.form.startTime && value <= this.form.startTime) {
        callback(new Error('结束时间必须晚于开始时间'))
      } else {
        callback()
      }
    },
    /** 开始时间改变处理 */
    handleStartTimeChange() {
      // 当开始时间改变时，重新验证结束时间
      if (this.form.endTime) {
        this.$refs.form.validateField('endTime')
      }
    },
    /** 结束时间改变处理 */
    handleEndTimeChange() {
      // 当结束时间改变时，重新验证开始时间
      if (this.form.startTime) {
        this.$refs.form.validateField('startTime')
      }
    },
    /** 是否到分局改变处理 */
    handleneed_branch_officeChange(value) {
      // 如果选择"否"，清空已选分局
      if (value === 0 || value === '0') {
        this.form.selected_branches = []
      }
      // 重新验证分局选择
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.validateField('selected_branches')
        }
      })
    },
    /** 验证分局选择 */
    validateselected_branches(rule, value, callback) {
      // 如果选择到分局，必须至少选择一个分局
      if (this.form.need_branch_office == 1) {
        if (!value || (Array.isArray(value) && value.length === 0)) {
          callback(new Error('请至少选择一个分局'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    /** 验证审核意见 */
    validateyuanyin(rule, value, callback) {
      if (this.auditForm.auditResult === '3' && (!value || value.trim() === '')) {
        callback(new Error('拒绝时请填写审核意见'))
      } else if (value && value.length > 200) {
        callback(new Error('审核意见不能超过200个字符'))
      } else {
        callback()
      }
    },
    /** 审核结果改变处理 */
    handleAuditResultChange(value) {
      console.log('审核结果改变:', value, '当前值:', this.auditForm.auditResult)
      // 当审核结果改变时，重新验证审核意见
      this.$nextTick(() => {
        if (this.$refs.auditForm) {
          this.$refs.auditForm.validateField('yuanyin')
        }
      })
    },
    /** 切换更多筛选条件显示 */
    toggleMoreFilters() {
      this.showMoreFilters = !this.showMoreFilters
    },
    /** 状态卡片点击处理 */
    handleStatusClick(status) {
      // 选择"全部"时，将state设为null，不传参数
      this.queryParams.state = status === '' ? null : status
      this.handleQuery()
    },
    /** 状态tabs切换处理（保留兼容性） */
    handleStatusChange(tab) {
      // 选择"全部"时，将state设为null，不传参数
      this.queryParams.state = tab.name === '' ? null : tab.name
      this.handleQuery()
    }
  }
}
</script>

<style scoped>
/* 主容器样式 */
.app-container {
  background: #f0f2f5;
  padding: 20px;
  min-height: calc(100vh - 84px);
}

.main-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: none;
}

/* 状态筛选区域 */
.status-section {
  padding: 20px 24px;
  display: flex;
}

/* 状态卡片容器 */
.status-card-container {
  position: relative;
  display: inline-flex;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e7ed;
  min-width: 480px;
  max-width: 600px;
}

/* 滑动指示器 */
.status-slider {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  z-index: 1;
  box-sizing: border-box;
}

/* 状态卡片项 */
.status-card-item {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  user-select: none;
  white-space: nowrap;
}

.status-card-item i {
  margin-right: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.status-card-item span {
  transition: all 0.3s ease;
}

/* 卡片悬停效果 */
.status-card-item:hover {
  color: #409EFF;
  transform: translateY(-1px);
}

.status-card-item:hover i {
  transform: scale(1.1);
}

/* 激活状态 */
.status-card-item.active {
  color: #fff;
  font-weight: 600;
}

.status-card-item.active i {
  transform: scale(1.15);
}

.status-card-item.active span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 点击动画 */
.status-card-item:active {
  transform: translateY(0) scale(0.98);
}

/* 筛选条件区域 */
.search-section {
  padding: 0 24px 24px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #409EFF;
}

.section-title i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 18px;
}

.search-form {
  margin: 0;
}

.search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.search-row .el-form-item {
  margin-bottom: 0;
  margin-right: 0;
}

.more-filters {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.more-filters .el-form-item {
  margin-bottom: 0;
  margin-right: 0;
}

.more-btn {
  color: #409EFF;
  font-size: 13px;
  margin-left: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.more-btn:hover {
  color: #66b1ff;
  background: rgba(64, 158, 255, 0.1);
}

/* 工具栏区域 */
.toolbar-section {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafbfc;
}

/* 表格区域 */
.table-section {
  padding: 0;
}

.table-section .el-table {
  border: none;
}

.table-section .el-table::before {
  display: none;
}

.table-section .el-table th {
  background: #fafbfc;
  color: #606266;
  font-weight: 600;
  border-bottom: 1px solid #e4e7ed;
}

.table-section .el-table td {
  border-bottom: 1px solid #f0f0f0;
}

/* 分页区域 */
.pagination-section {
  padding: 16px 24px;
  background: #fafbfc;
  border-radius: 0 0 8px 8px;
  text-align: center;
}

.audit-info-section {
  background: #fafbfc;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 8px;
}

.section-header i {
  margin-right: 8px;
  color: #409EFF;
}

.info-card {
  background: #fff;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e4e7ed;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.info-row.full-width {
  margin-bottom: 20px;
}

.info-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  word-break: break-all;
}

.title-value {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.time-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-label {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.time-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.time-range {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

.time-separator {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
  padding: 0 8px;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-label {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 80px;
}

.status-value {
  flex: 1;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-label {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-content {
  font-size: 14px;
  color: #303133;
  line-height: 1.5;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #409EFF;
  white-space: pre-wrap;
  margin-top: 4px;
}

.audit-action-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.dialog-footer {
  background: #fafbfc;
}

/* 审核结果单选框样式优化 */
.el-radio {
  margin-bottom: 10px;
}

.el-radio__label {
  font-size: 14px;
  padding-left: 8px;
}

/* 审核意见文本框样式 */
.el-textarea__inner {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.el-textarea__inner:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 信息展示区域标题样式 */
.audit-info-section h4,
.audit-action-section h4 {
  display: flex;
  align-items: center;
  font-weight: 600;
}

/* 标签样式优化 */
.el-tag {
  border-radius: 4px;
  font-weight: 500;
}

/* 日期范围选择器样式优化 */
.el-date-editor--daterange {
  width: 100% !important;
}

.el-date-editor--daterange .el-input__inner {
  padding-right: 30px;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .info-row {
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .info-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .info-row.full-width .info-cell {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .audit-info-section {
    padding: 12px;
  }
  
  .info-card {
    padding: 12px;
  }
  
  .section-header {
    font-size: 14px;
  }
  
  .card-title {
    font-size: 13px;
  }
  
  .info-label,
  .time-label,
  .status-label,
  .detail-label {
    font-size: 11px;
  }
  
  .info-value,
  .time-value,
  .detail-content {
    font-size: 13px;
  }
  
  .title-value {
    font-size: 15px;
  }
}
</style>
